<template>
  <div style="background-color: #ebebeb">
    <el-card class="box-card">
      <el-row>
        <!-- <el-col :span="2">
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid white;
                background-color: cornflowerblue;
                text-align: center;
                position: fixed;
              "
            >
              <span style="color: white; line-height: 100px">项目信息</span>
            </div>
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid white;
                background-color: cornflowerblue;
                text-align: center;
                margin-top: 100px;
                position: fixed;
              "
            >
              <span style="color: white; line-height: 100px">基本信息</span>
            </div>
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid white;
                background-color: cornflowerblue;
                text-align: center;
                margin-top: 200px;
                position: fixed;
              "
            >
              <span style="color: white; line-height: 100px">报销信息</span>
            </div>
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid white;
                background-color: cornflowerblue;
                text-align: center;
                margin-top: 300px;
                position: fixed;
              "
            >
              <span style="color: white; line-height: 100px"
                >请选择组长审批</span
              >
            </div>
          </el-col> -->
        <el-col :span="22">
          <h3 style="color: skyblue; margin-bottom: 30px">审核记录</h3>
          <hr />
          <!-- <el-col :span="6" class="class">
              <el-form-item label="选择审核人:" prop="field101">
                <el-select
                  v-model="formData.field101"
                  placeholder="请选择审核人"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in field101Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          <el-table height="300px" title="审核记录" :data="ApprovedMemo">
            <el-table-column prop="auditor" label="审核人"></el-table-column>
            <el-table-column prop="stepName" label="审核流程"></el-table-column>
            <el-table-column prop="auditStatus" label="审核状态">
              <template #default="scope">
                <el-tag v-if="scope.row.auditStatus == 1" type="success"
                  >审核通过</el-tag
                >
                <el-tag v-else type="danger">审核不通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditDate"
              label="审核时间"
            ></el-table-column>
            <el-table-column prop="remark" label="审核说明"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <br />
    </el-card>
    <el-card class="box-card" style="margin-top: 30px">
      <p style="color: skyblue">审核</p>
      <el-form
        label-width="100px"
        :model="AduitResult"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="结果类型" prop="Outcome">
          <el-select v-model="AduitResult.Outcome" @change="GetOption()">
            <el-option
              v-for="item in AduitResultOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              
            ></el-option> </el-select
        ></el-form-item>
        <el-form-item v-if="AduitResult.Outcome == false" prop="orderId" label="退回步骤">
          <el-select v-model="AduitResult.orderId">
            <el-option
              v-for="item in AduitStepOptions"
              :key="item.orderId"
              :label="item.stepName"
              :value="item.orderId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="AduitResult.Outcome == false" prop="remark" label="退回原因说明">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容..."
            v-model="AduitResult.remark"
          >
          </el-input>
        </el-form-item>
        <div style="width: 100%; text-align: center">
          <el-form-item size="large">
            <p style="text-align: center">
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button
                style="text-align: center"
                @click="resetForm('ruleForm')"
                >重置</el-button
              >
            </p>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <!-- <el-card class="box-card" style="margin-top: 30px">
        <el-row>
          <el-col :span="2"> </el-col>
          <el-col :span="22">
            <h3 style="color: skyblue; margin-bottom: 30px">文件上传</h3>
            <hr />
            <span style="color: red; margin-bottom: 10px"
              >▼所需上传文件明细:1.发票;2.送/发货单</span
            >
            <br /><br />
            <el-form-item
              style="margin-left: -90px; margin-bottom: -1px"
              label=""
              prop="field102"
              required
            >
              <el-upload
                ref="field102"
                :file-list="field102fileList"
                :action="field102Action"
                multiple
                :before-upload="field102BeforeUpload"
              >
                <el-button size="small" type="primary" icon="el-icon-folder-add"
                  >选择文件</el-button
                >
              </el-upload>
            </el-form-item>         
              <div class="el-upload__text">点击上面按钮上传文件</div>    
            <br />
            <div class="el-upload__tip">
              只能上传.jpg, .jpeg, .png, .gif, .doc, .docx, .pdf, .xls, .xlsx ,
              .txt文件，且不超过10  MB
            </div>
          </el-col>
        </el-row>
      </el-card> -->
  </div>
</template>
<style>
.class {
  margin-bottom: 10px;
  margin-top: 30px;
}
</style>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      AduitResult: {
        projectId: undefined,
        Outcome: undefined,
        remark: undefined,
        orderId: undefined,
        auditStepId: undefined,
      },
      ApprovedMemo: [],

      AduitResultOptions: [
        {
          label: "通过",
          value: true,
        },
        {
          label: "退回",
          value: false,
        },
      ],
      AduitStepOptions: [],
      rules: {
        Outcome: [
          { required: true, message: "请选择审核类型", trigger: "change" },
        ],
        orderId: [
          { required: true, message: "请选择退回步骤", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请填写原因说明", trigger: "change" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.GetWorkStepInfo();
    
  },
  mounted() {},
  methods: {
    GetOption(){
      this.GetReturnWorkFlowStep();
    },
    GetReturnWorkFlowStep()
    {
      let id = this.$route.query.id;
      this.http.get('api/tb_project_workflowstep/GetReturnWorkFlowStep?projectId='+id+'&stepId='+ this.$route.query.stepId).then(
            (res)=>{
                if(res.status)
                {
                  this.AduitStepOptions = res.result.data;
                  console.log(this.AduitStepOptions);
                }
            }
        ) 
    },
    submitForm(ruleForm) {
      this.AduitResult.projectId = this.$route.query.id;
      this.AduitResult.auditStepId = this.$route.query.stepId;
      this.$refs[ruleForm].validate((valid) => {
        if (!valid) return;
        this.http
          .post(
            "api/tb_project_workflowstep/WorkFlowStepAddTs",
            this.AduitResult
          )
          .then((res) => {
            if (res.status) {
              this.$message("操作成功");
              this.$router.push("/ApplyFor");
            } else {
              this.$message(res.message);
              this.$router.push("/ApplyFor");
            }
          });
      });
    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    field102BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    GetWorkStepInfo() {
      this.http
        .get(
          "api/tb_project_workflowstep/GetWorkStepInfo?projectId=" +
            this.$route.query.id
        )
        .then((res) => {
          console.log(res.result, "sss");
          this.ApprovedMemo = res.result.data;
        });
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>